<template>
  <div class="dashboard">
    <!-- 顶部头部区域 -->
    <div class="dashboard-header">
      <div class="header-top">
        <div class="company-info">
          <h1 class="company-name">XX物业公司</h1>
          <div class="community-info">XXX小区 VIP版 | 到期时间 2022-6-30</div>
        </div>
        <div class="system-metrics">
          <div class="metric-item">
            <span class="metric-label">可添加小区(个)</span>
            <span class="metric-value">6</span>
          </div>
          <div class="metric-item">
            <span class="metric-label">剩余短信(条)</span>
            <span class="metric-value">4512</span>
          </div>
        </div>
      </div>
      <div class="welcome-banner">
        欢迎使用智慧物业系统,开启你的智慧生活。
      </div>
    </div>

    <!-- 关键指标卡片区域 -->
    <div class="kpi-section">
      <el-row :gutter="20">
        <el-col :span="3" v-for="(kpi, index) in kpiData" :key="index">
          <div class="kpi-card">
            <div class="kpi-icon">
              <i :class="kpi.icon"></i>
            </div>
            <div class="kpi-content">
              <div class="kpi-number">{{ kpi.value }}</div>
              <div class="kpi-label">{{ kpi.label }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <el-row :gutter="20">
        <!-- 左侧列 -->
        <el-col :span="8">
          <!-- 房屋统计 -->
          <el-card class="chart-card">
            <div slot="header" class="card-header">
              <span>房屋统计</span>
            </div>
            <div class="housing-stats">
              <div class="stat-item">
                <span class="stat-label">入住率</span>
                <div class="progress-bar">
                  <div class="progress-fill" style="width: 70%; background: #67C23A;"></div>
                </div>
                <span class="stat-value">70%</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">出租率</span>
                <div class="progress-bar">
                  <div class="progress-fill" style="width: 20%; background: #67C23A;"></div>
                </div>
                <span class="stat-value">20%</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">空置率</span>
                <div class="progress-bar">
                  <div class="progress-fill" style="width: 5%; background: #67C23A;"></div>
                </div>
                <span class="stat-value">5%</span>
              </div>
            </div>
          </el-card>

          <!-- 满意度图表 -->
          <el-card class="chart-card">
            <div slot="header" class="card-header">
              <span>满意度</span>
            </div>
            <div class="chart-container">
              <v-chart :option="satisfactionOption" style="height: 200px;"></v-chart>
            </div>
          </el-card>

          <!-- 待办工单 -->
          <el-card class="chart-card">
            <div slot="header" class="card-header">
              <span>待办工单</span>
            </div>
            <div class="work-order-list">
              <div class="work-order-item" v-for="(order, index) in workOrders" :key="index">
                <div class="order-time">{{ order.time }}</div>
                <div class="order-content">{{ order.content }}</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 中间列 -->
        <el-col :span="8">
          <!-- 缴费统计 -->
          <el-card class="chart-card">
            <div slot="header" class="card-header">
              <span>缴费统计</span>
            </div>
            <div class="payment-stats">
              <div class="payment-summary">
                <div class="summary-item">
                  <span class="summary-label">应缴费用</span>
                  <span class="summary-value">2039.23万元</span>
                </div>
                <div class="summary-item">
                  <span class="summary-label">已收</span>
                  <span class="summary-value">1039.23万元</span>
                </div>
                <div class="summary-item">
                  <span class="summary-label">待收</span>
                  <span class="summary-value">39.23万元</span>
                </div>
              </div>
              <div class="payment-charts">
                <div class="payment-chart" v-for="(chart, index) in paymentCharts" :key="index">
                  <div class="chart-title">{{ chart.name }}</div>
                  <div class="donut-chart">
                    <v-chart :option="chart.option" style="height: 80px;"></v-chart>
                  </div>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 工单统计 -->
          <el-card class="chart-card">
            <div slot="header" class="card-header">
              <span>工单统计</span>
            </div>
            <div class="chart-container">
              <v-chart :option="workOrderOption" style="height: 200px;"></v-chart>
            </div>
          </el-card>

          <!-- 开门类型统计 -->
          <el-card class="chart-card">
            <div slot="header" class="card-header">
              <span>开门类型统计</span>
            </div>
            <div class="door-stats">
              <div class="door-chart">
                <v-chart :option="doorOption" style="height: 150px;"></v-chart>
              </div>
              <div class="door-legend">
                <div class="legend-item" v-for="(item, index) in doorLegend" :key="index">
                  <span class="legend-dot" :style="{backgroundColor: item.color}"></span>
                  <span class="legend-text">{{ item.name }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 右侧列 -->
        <el-col :span="8">
          <!-- 快捷方式 -->
          <el-card class="chart-card">
            <div slot="header" class="card-header">
              <span>快捷方式</span>
            </div>
            <div class="quick-access">
              <el-button type="primary" class="quick-btn">收银台</el-button>
              <el-button type="success" class="quick-btn">未缴账单</el-button>
              <div class="announcement-btn">
                <el-button type="warning" class="quick-btn">小区公告</el-button>
                <el-button type="text" size="mini">+添加</el-button>
              </div>
              <el-button type="info" class="quick-btn">一键报修</el-button>
              <el-button type="danger" class="quick-btn">缴费通知</el-button>
            </div>
          </el-card>

          <!-- 通知公告 -->
          <el-card class="chart-card">
            <div slot="header" class="card-header">
              <span>通知公告</span>
            </div>
            <div class="notification-list">
              <div class="notification-item" v-for="(notification, index) in notifications" :key="index">
                <div class="notification-time">{{ notification.time }}</div>
                <div class="notification-content">{{ notification.content }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import VChart from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'

export default {
  name: 'Dashboard',
  components: {
    VChart
  },
  data() {
    return {
      // 关键指标数据
      kpiData: [
        { icon: 'el-icon-office-building', value: '647', label: '房屋认证数' },
        { icon: 'el-icon-user', value: '1829', label: '业主数' },
        { icon: 'el-icon-key', value: '231', label: '租客数' },
        { icon: 'el-icon-s-custom', value: '39', label: '员工数' },
        { icon: 'el-icon-s-shop', value: '123', label: '商家数' },
        { icon: 'el-icon-s-flag', value: '1290', label: '车位数' },
        { icon: 'el-icon-truck', value: '928', label: '登记车辆数' }
      ],
      // 待办工单数据
      workOrders: [
        { time: '2021-04-12 11:30', content: 'B1-1楼梯口消防设备维修' },
        { time: '2021-04-12 11:30', content: 'A2楼顶出现漏水现象' },
        { time: '2021-04-12 11:30', content: 'B1-1楼梯口消防设备维修' },
        { time: '2021-04-12 11:30', content: 'B1-1楼梯口消防设备维修' }
      ],
      // 通知公告数据
      notifications: [
        { time: '2021-04-12 11:30', content: '五一放假通知' },
        { time: '2021-04-12 11:30', content: '四月账单已生成' },
        { time: '2021-04-12 11:30', content: '小区公区维护提醒' },
        { time: '2021-04-12 11:30', content: '垃圾分类提示' },
        { time: '2021-04-12 11:30', content: '小区公区维护提醒' },
        { time: '2021-04-12 11:30', content: '小区公区维护提醒' },
        { time: '2021-04-12 11:30', content: '小区公区维护提醒' },
        { time: '2021-04-12 11:30', content: '三月账单已生成' },
        { time: '2021-04-12 11:30', content: '三月账单已生成' },
        { time: '2021-04-12 11:30', content: '出行安全提示' }
      ],
      // 满意度图表配置
      satisfactionOption: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['满意度1', '满意度2']
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100
        },
        series: [
          {
            name: '满意度1',
            type: 'line',
            data: [65, 70, 60, 75, 68, 72, 65, 70, 68, 75, 70, 72],
            smooth: true,
            lineStyle: { color: '#409EFF' }
          },
          {
            name: '满意度2',
            type: 'line',
            data: [45, 50, 40, 55, 48, 52, 45, 50, 48, 55, 50, 52],
            smooth: true,
            lineStyle: { color: '#F56C6C' }
          }
        ]
      },
      // 工单统计图表配置
      workOrderOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['智能系统', '消防系统', '清洁绿化', '空调维修', '电梯问题', '其它问题']
        },
        yAxis: {
          type: 'value',
          max: 100
        },
        series: [
          {
            data: [40, 88, 60, 40, 7, 15],
            type: 'bar',
            itemStyle: {
              color: '#409EFF'
            }
          }
        ]
      },
      // 开门类型统计图表配置
      doorOption: {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            data: [
              { value: 2000, name: '人脸识别', itemStyle: { color: '#409EFF' } },
              { value: 1500, name: '远程开门', itemStyle: { color: '#E6A23C' } },
              { value: 1200, name: '指纹识别', itemStyle: { color: '#67C23A' } },
              { value: 800, name: 'APP扫描', itemStyle: { color: '#F56C6C' } },
              { value: 393, name: '门禁刷卡', itemStyle: { color: '#909399' } }
            ],
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        ]
      },
      // 开门类型图例
      doorLegend: [
        { name: '人脸识别', color: '#409EFF' },
        { name: '远程开门', color: '#E6A23C' },
        { name: '指纹识别', color: '#67C23A' },
        { name: 'APP扫描', color: '#F56C6C' },
        { name: '门禁刷卡', color: '#909399' }
      ],
      // 缴费统计小图表
      paymentCharts: [
        {
          name: '停车费',
          option: {
            series: [{
              type: 'pie',
              radius: ['50%', '70%'],
              data: [
                { value: 72, name: '已收', itemStyle: { color: '#409EFF' } },
                { value: 28, name: '未收', itemStyle: { color: '#E4E7ED' } }
              ],
              label: { show: false },
              labelLine: { show: false }
            }]
          }
        },
        {
          name: '物业费',
          option: {
            series: [{
              type: 'pie',
              radius: ['50%', '70%'],
              data: [
                { value: 70, name: '已收', itemStyle: { color: '#E6A23C' } },
                { value: 30, name: '未收', itemStyle: { color: '#E4E7ED' } }
              ],
              label: { show: false },
              labelLine: { show: false }
            }]
          }
        },
        {
          name: '商铺租金',
          option: {
            series: [{
              type: 'pie',
              radius: ['50%', '70%'],
              data: [
                { value: 48, name: '已收', itemStyle: { color: '#9C27B0' } },
                { value: 52, name: '未收', itemStyle: { color: '#E4E7ED' } }
              ],
              label: { show: false },
              labelLine: { show: false }
            }]
          }
        },
        {
          name: '水电费',
          option: {
            series: [{
              type: 'pie',
              radius: ['50%', '70%'],
              data: [
                { value: 63, name: '已收', itemStyle: { color: '#F56C6C' } },
                { value: 37, name: '未收', itemStyle: { color: '#E4E7ED' } }
              ],
              label: { show: false },
              labelLine: { show: false }
            }]
          }
        },
        {
          name: '维修费',
          option: {
            series: [{
              type: 'pie',
              radius: ['50%', '70%'],
              data: [
                { value: 26, name: '已收', itemStyle: { color: '#67C23A' } },
                { value: 74, name: '未收', itemStyle: { color: '#E4E7ED' } }
              ],
              label: { show: false },
              labelLine: { show: false }
            }]
          }
        }
      ]
    }
  }
}
</script>

<style scoped>
.dashboard {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 顶部头部区域 */
.dashboard-header {
  background: white;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
}

.company-info {
  flex: 1;
}

.company-name {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin: 0 0 8px 0;
}

.community-info {
  font-size: 14px;
  color: #606266;
}

.system-metrics {
  display: flex;
  gap: 30px;
}

.metric-item {
  text-align: center;
}

.metric-label {
  display: block;
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.metric-value {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.welcome-banner {
  background: linear-gradient(90deg, #ffd700 0%, #ffed4e 100%);
  color: #333;
  text-align: center;
  padding: 12px;
  font-size: 16px;
  font-weight: 500;
}

/* 关键指标卡片区域 */
.kpi-section {
  margin-bottom: 20px;
}

.kpi-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  height: 100px;
  transition: transform 0.2s;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.kpi-icon {
  margin-right: 15px;
}

.kpi-icon i {
  font-size: 32px;
  color: #409EFF;
}

.kpi-content {
  flex: 1;
}

.kpi-number {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.kpi-label {
  font-size: 14px;
  color: #606266;
}

/* 主要内容区域 */
.main-content {
  margin-bottom: 20px;
}

.chart-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

/* 房屋统计 */
.housing-stats {
  padding: 10px 0;
}

.stat-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.stat-label {
  width: 60px;
  font-size: 14px;
  color: #606266;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  margin: 0 15px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.stat-value {
  width: 40px;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

/* 图表容器 */
.chart-container {
  padding: 10px 0;
}

/* 待办工单 */
.work-order-list {
  max-height: 200px;
  overflow-y: auto;
}

.work-order-item {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.work-order-item:last-child {
  border-bottom: none;
}

.order-time {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.order-content {
  font-size: 14px;
  color: #606266;
  line-height: 1.4;
}

/* 缴费统计 */
.payment-stats {
  padding: 10px 0;
}

.payment-summary {
  margin-bottom: 20px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-label {
  font-size: 14px;
  color: #606266;
}

.summary-value {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.payment-charts {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.payment-chart {
  flex: 1;
  min-width: 80px;
  text-align: center;
}

.chart-title {
  font-size: 12px;
  color: #606266;
  margin-bottom: 8px;
}

.donut-chart {
  height: 80px;
}

/* 开门类型统计 */
.door-stats {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.door-chart {
  flex: 1;
}

.door-legend {
  margin-left: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.legend-text {
  font-size: 12px;
  color: #606266;
}

/* 快捷方式 */
.quick-access {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}

.quick-btn {
  width: 100%;
  height: 40px;
}

.announcement-btn {
  display: flex;
  align-items: center;
  gap: 10px;
}

.announcement-btn .quick-btn {
  flex: 1;
}

/* 通知公告 */
.notification-list {
  max-height: 300px;
  overflow-y: auto;
}

.notification-item {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-time {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.notification-content {
  font-size: 14px;
  color: #606266;
  line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .kpi-card {
    height: 80px;
    padding: 15px;
  }
  
  .kpi-icon i {
    font-size: 24px;
  }
  
  .kpi-number {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .system-metrics {
    width: 100%;
    justify-content: space-around;
  }
  
  .kpi-section .el-col {
    margin-bottom: 10px;
  }
  
  .main-content .el-col {
    margin-bottom: 20px;
  }
}
</style>